<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
    <link rel="stylesheet" href="../static/style.css">
    <title>首页</title>
    <style>
        /* CSS 样式可以根据需要自行修改 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f0f0f0;
        }

        .logo img {
            max-width: 40px; /* 设置最大宽度 */
            height: auto; /* 让高度自动调整以保持比例 */
        }

        .login {
            text-align: right;
        }

        .login button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #000000; /* 按钮背景色 */
            color: white; /* 按钮文字颜色 */
            border: none;
            cursor: pointer;
            border-radius: 20px; /* 圆角半径 */
        }

        .login button:hover {
            background-color: rgba(185, 176, 176, 0.19); /* 鼠标悬停时的背景色 */
        }

    .modal-background {
        display: none; /* 默认隐藏 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        z-index: 1; /* 位于弹窗之下 */
    }


        .main {
            display: flex;
            padding: 20px;
        }

        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .video {
            flex: 1;
            margin-left: 20px; /* 可调整为适当的间距 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

    </style>
</head>
<body>
<header>
    <div class="logo">
        <img src="../static/projectImages/logo.png" alt="Logo">
    </div>
    <div class="login">
        {% if username %}
            <!-- 显示登录后的用户名 -->
            <button onclick="redirectToProfile()">{{ username }}</button>
        {% else %}
            <button onclick="openModal('loginModal')">登录 / 注册</button>
        {% endif %}
    </div>
</header>

<!-- 模态框 -->


<div class="main">
    <div class="content">
        <h1 style="font-size: 40px;">图片画质增强</h1>
        <p style="font-size: 20px;">轻松提高和提升您的照片质量，获得更高分辨率的图像。</p>
        <div class="flex flex-col w-1/2 items-start medium:order-2 medium:w-full medium:items-center">
            <div class="mb-[24px] mobile:mb-[24px] mobile:w-full">
                <div>
                    <div class="items-center h-[108px] px-6 rounded-2xl bg-gray-900 shadow-[0px_10px_18px_0px_rgba(0,_0,_0,_0.12)] flex lg:w-[467px]"
                         role="button" tabindex="0" id="upload-area">
                        <picture class="w-10 h-10">
                            <img src="https://storage-web.pixocial.com/vmake-prod/official/svg/upload-cloud-white.svg"
                                 width="40" height="40" alt="pick file button" draggable="false">
                        </picture>
                        <div class="mx-4 bg-gray-300 opacity-30 h-[76px] w-[1px] "></div>
                        <div class="mr-[24px] my-[16px] flex-1">
                            <p class="text-lg leading-7 whitespace-pre-line font-openSansSemiBold text-white">
                                点击上传图片 。
                            </p>
                            <p class="mt-1 text-sm leading-4 font-openSans text-gray-300">
                                支持的格式：PNG，JPG，JPEG
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="video">

        <video style="width:80%; height: auto;" muted loop autoplay crossorigin="anonymous" playsinline>
            <source src="https://storage-web.pixocial.com/vmake-prod/official/media/image_watermark_remove.webm"
                    type="video/webm">
            <source src="https://storage-web.pixocial.com/vmake-prod/official/media/image_watermark_remove.mp4"
                    type="video/mp4">
        </video>


    </div>
</div>
<div id="modalBackground" class="modal-background" onclick="closeModal()"></div>
<div id="modalContainer" class="container">
    <div class="sign-up-container">
        <form id="registerForm" action="/register" method="post">
            <h1>创建账号</h1>
            <input type="text" id="username" name="username" required placeholder="用户名">
            <input type="password" id="password" name="password" required placeholder="密码">
            <button class="form_btn">注册</button>
            <div id="registerMessage" class="register-message"></div>
        </form>

    </div>
    <div class="sign-in-container">
        <form id="loginForm" action="/login" method="post">
            <h1>登录</h1>
            <input type="text" id="username" name="username" required placeholder="用户名">
            <input type="password" id="password" name="password" required placeholder="密码">
            <button class="form_btn">登录</button>
            <div id="loginMessage" class="login-message"></div>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay-left">
            <h1>欢迎回来</h1>
            <p>To keep connected with us please login with your personal info</p>
            <button id="signIn" class="overlay_btn">登录</button>
        </div>
        <div class="overlay-right">
            <h1>Hello, 朋友</h1>
            <p>Enter your personal details and start journey with us</p>
            <button id="signUp" class="overlay_btn">注册</button>
        </div>
    </div>
    <button onclick="closeModal('loginModal')">关闭</button>
</div>

<!-- partial -->
<script src="../static/script.js"></script>

<script>
    var modalBackground = document.getElementById("modalBackground");
    var modalContainer = document.getElementById("modalContainer");

    function openModal() {
        modalBackground.style.display = "block";
        modalContainer.style.display = "block";
    }

    function closeModal() {
        modalBackground.style.display = "none";
        modalContainer.style.display = "none";
    }

    // 阻止模态框内部点击事件冒泡到外部关闭模态框
    modalContainer.addEventListener("click", function (event) {
        event.stopPropagation();
    });

    //注册事件
    document.getElementById('registerForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var form = this;
    var formData = new FormData(form);

    fetch('/register', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        var registerMessageDiv = document.getElementById('registerMessage');

        if (data.status === 'success') {
            registerMessageDiv.style.color = 'green';
        } else {
            registerMessageDiv.style.color = 'red';
        }

        registerMessageDiv.innerHTML = data.message;
    })
    .catch(error => {
        console.error('Error:', error);
    });
});


    //登录事件
    document.getElementById('loginForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var form = this;

            var formData = {
        username: form.elements.username.value,
        password: form.elements.password.value
    };

        fetch('/login', {
            method: 'POST',
            body: JSON.stringify(formData)
        })
            .then(response => response.json())
            .then(data => {
                var loginMessageDiv = document.getElementById('loginMessage');

                if (data.status === 'success') {
                    // 关闭登录弹窗
                    closeModal();

                     var userName = data.userName; // 假设这是后端返回的用户名数据

                    // 设置按钮文本为用户名
                    var loginButton = document.querySelector('.login button');
                    loginButton.textContent = userName;

                    // 修改按钮的点击事件为路由跳转
                    loginButton.onclick = function() {
                        redirectToProfile(); // 假设redirectToProfile是你的路由跳转函数
                    };

                    // 在这里使用 console.log 输出用户名信息
                    console.log(userName);
                } else {
                    loginMessageDiv.style.color = 'red';
                    loginMessageDiv.innerHTML = data.message;
                }


            })
            .catch(error => {
                console.error('Error:', error);
            });
    });

    function redirectToProfile() {
    // 这里可以编写路由跳转的具体逻辑，例如使用 window.location.href = '/profile';
    // 也可以使用框架提供的路由跳转方法，根据你的具体情况来实现
    console.log('Redirecting to profile...');
    // 示例：使用原生JS进行跳转
    window.location.href = '/history'; // 假设这是你的个人资料页面路由
    }

document.addEventListener('DOMContentLoaded', function() {
    var uploadArea = document.getElementById('upload-area');

    uploadArea.addEventListener('click', function() {
        var input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/png, image/jpeg';

        input.addEventListener('change', function (event) {
            var file = event.target.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    localStorage.setItem('uploadedImage', e.target.result);
                    redirectToUpload();
                };
                reader.readAsDataURL(file);
            }


        });

        input.click();
    });
});

function redirectToUpload() {
    // 跳转到 watermark 页面，并传递图片信息
    window.location.href = '/watermark';
}







</script>
</body>
</html>
